/**
 */

const DevWith = 320;
const DevHeight = 240;
const DevScale = 2;

let app = {
    width:DevWith,
    height:DevHeight,
    init(){},
    update(){},
    render(){},
};

let __canvas,__ctx,__imageData; // 用于显示的canvas
let __offCanvas,__offCtx;  // 离屏的 canvas
window.onload = function () {

    // 1.  呈现画面的canvas
    __canvas = document.createElement('canvas');
    __canvas.width = __canvas.clientWidth = DevWith * DevScale;
    __canvas.height = __canvas.clientHeight = DevHeight * DevScale;
    __canvas.style.background = '#000';
    document.body.appendChild(__canvas);

    // 2. 创建一个离屏的 canvas
    __offCanvas = document.createElement('canvas');
    __offCanvas.width = __offCanvas.clientWidth = DevWith;
    __offCanvas.height = __offCanvas.clientHeight = DevHeight;
    __offCtx = __offCanvas.getContext('2d');

    // 相当于创建一块用于绘制的内存区域
    __ctx = __canvas.getContext('2d');
    __imageData = __ctx.createImageData(DevWith,DevHeight);
    __ctx.scale(DevScale,DevScale); // 放大一倍显示出来

    app.init();
    loop();
};

function loop() {
    app.update();
    app.render();

    __offCtx.putImageData(__imageData,0,0);
    __ctx.clearRect(0,0,__canvas.width,__canvas.height);
    __ctx.drawImage(__offCanvas,0,0);

    requestAnimationFrame(loop);
}
